<template>
  <div class="api-test">
    <h2>API 接口测试</h2>

    <div class="test-cases">
      <div class="test-case">
        <h3>论文接口测试</h3>
        <button @click="testGetPapers">获取论文列表</button>
        <button @click="testCreatePaper">创建论文</button>
        <pre v-if="paperResponse">{{ paperResponse }}</pre>
      </div>

      <div class="test-case">
        <h3>项目接口测试</h3>
        <div class="button-group">
          <button @click="testGetVerticalProjects">获取纵向课题</button>
          <button @click="testGetHorizontalProjects">获取横向课题</button>
        </div>
        <pre v-if="projectResponse">{{ projectResponse }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ApiTest',
  data() {
    return {
      paperResponse: null,
      projectResponse: null,
      testPaper: {
        paperTitle: '测试论文标题',
        journal: '测试期刊',
        firstAuthor: '测试作者',
        publishDate: '2023-01-01',
        impactFactor: 1.5
      }
    }
  },
  methods: {
    async testGetPapers() {
      try {
        const response = await axios.get('/api/papers')
        this.paperResponse = response.data
      } catch (error) {
        this.paperResponse = `Error: ${error.message}`
      }
    },

    async testCreatePaper() {
      try {
        const response = await axios.post('/api/papers', this.testPaper)
        this.paperResponse = response.data
      } catch (error) {
        this.paperResponse = `Error: ${error.message}`
      }
    },

    async testGetVerticalProjects() {
      try {
        const response = await axios.get('/api/projects/vertical')
        this.projectResponse = response.data
      } catch (error) {
        this.projectResponse = `Error: ${error.message}`
      }
    },

    async testGetHorizontalProjects() {
      try {
        const response = await axios.get('/api/projects/horizontal')
        this.projectResponse = response.data
      } catch (error) {
        this.projectResponse = `Error: ${error.message}`
      }
    }
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
}

.test-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.test-case {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 5px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
</style>